<template>
  <div class="h-[100vh] mySwiperContainer">
    <swiper class="mySwiper" :style="style" :direction="'vertical'" :loop="true" :autoplay="autoplay"
      :navigation="false" :pagination="pagination" :modules="modules" :speed="autoplay.speed"
      @autoplayTimeLeft="onAutoplayTimeLeft">
      <swiper-slide v-for="(item, index) in 2" :key="index">
        <img class="w-full h-full object-cover" :src="`https://picsum.photos/1920/1080?${index}`" :alt="item">
      </swiper-slide>
      <template #container-end>
        <div class="autoplay-progress">
          <svg viewBox="0 0 48 48" ref="progressCircle">
            <circle cx="24" cy="24" r="20"></circle>
          </svg>
          <span ref="progressContent"></span>
        </div>
      </template>
    </swiper>
  </div>
  <div class="h-[100vh] mySwiperContainer">
    <swiper class="mySwiper" :style="style" :loop="true" :autoplay="autoplay" :navigation="true"
      :pagination="pagination" :modules="modules" :speed="autoplay.speed">
      <swiper-slide v-for="(item, index) in 2" :key="index">
        <img class="w-full h-full object-cover" :src="`https://picsum.photos/1920/1080?${index}`" :alt="item">
      </swiper-slide>
    </swiper>
  </div>
  <div class="h-[100vh] mySwiperContainer">
    <swiper class="mySwiper" :style="style" :loop="true" :autoplay="autoplay" :navigation="true"
      :pagination="pagination" :scrollbar="scrollbar" :modules="modules" :speed="autoplay.speed" :effect="'fade'">
      <swiper-slide v-for="(item, index) in 2" :key="index">
        <img class="w-full h-full object-cover fade-effect" :src="`https://picsum.photos/1920/1080?${index}`"
          :alt="item">
      </swiper-slide>
    </swiper>
  </div>
  <div class="h-[10vh] mySwiperContainer">
    <swiper class="mySwiper p-4" :style="style" :direction="'vertical'" :mousewheel="true" :loop="true"
      :autoplay="autoplay" :navigation="false" :pagination="false" :modules="modules" @swiper="onSwiper"
      @slideChange="onSlideChange" :speed="autoplay.speed">
      <swiper-slide class="p-4" v-for="(item, index) in 10" :key="index">
        {{ item }}
      </swiper-slide>
    </swiper>
  </div>
  <div class="list w-full mx-auto flex justify-center">
    <div class="item w-[100px] bg-[#000] m-[10px] cursor-pointer text-center text-[]"
      :class="{ 'active': currentIndex === index }" v-for="(item, index) in 10" :key="index" @click="getIndex(index)">
      {{ item }}
    </div>
  </div>
  <CountTo ref="article" :startVal="0" :endVal="1000" :duration="3000" separator="" class="text-[45px] font-bold">
  </CountTo>
  <div ref="newsBox" class="h-[300px] mySwiperContainer relative" style="width: 1200px; margin: 0 auto;">
    <swiper class="mySwiper" :style="style" :loop="true" :autoplay="autoplay" :centeredSlides="true"
      :breakpoints="breakpoints" :slidesPerView="5" :spaceBetween="20" :navigation="false" :grabCursor="true"
      :pagination="pagination" :modules="modules" @swiper="onSwiper2" @slideChange="slideChange2">
      <swiper-slide v-for="(item, index) in 10" :key="index">
        <div class="w-full h-[50%] myImg" :title="item">
          <img class="w-full h-full object-cover" :src="`https://picsum.photos/300?${index}`" :alt="item">
        </div>
      </swiper-slide>
    </swiper>
    <el-button class="absolute left-[-80px] top-[50%] translate-y-[-50%] p-4" @click="prevSlide" circle>
      <el-icon size="20">
        <ArrowLeftBold />
      </el-icon>
    </el-button>
    <el-button class="absolute right-[-80px] top-[50%] translate-y-[-50%] p-4" @click="nextSlide" circle>
      <el-icon size="20">
        <ArrowRightBold />
      </el-icon>
    </el-button>
  </div>
</template>
<script setup>
import { ref, useTemplateRef } from 'vue'
import { useIntersectionObserver } from '@vueuse/core';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { CountTo } from 'vue3-count-to';
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import 'swiper/css/effect-fade';
import 'swiper/css/free-mode';
import 'swiper/css/thumbs';

import { Navigation, Pagination, Autoplay, Scrollbar, Mousewheel, EffectFade } from 'swiper/modules'
const modules = ref([Navigation, Pagination, Autoplay, Scrollbar, Mousewheel, EffectFade])

// 自定义分页等样式
const style = ref({
  width: '100%',
  height: '100%',
  '--swiper-navigation-color': '#000000',
  '--swiper-pagination-color': '#000000',
  '--swiper-pagination-bullet-inactive-color': '#000000',
  '--swiper-pagination-bullet-inactive-opacity': '0.4',
})
const autoplay = ref({
  delay: 3000,
  disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
  // reverseDirection: true,// 反方向
  // pauseOnMouseEnter: true,// 鼠标移入暂停
  waitForTransition: true,// 等待过渡完成 
  speed: 700, // 新增：控制滚动速度，值越小滚动越快
})
const breakpoints = ref({
  640: {
    slidesPerView: 1,
    spaceBetween: 20
  },
  768: {
    slidesPerView: 2,
    spaceBetween: 20
  },
  1024: {
    slidesPerView: 3,
    spaceBetween: 20
  },
  1200: {
    slidesPerView: 4,
    spaceBetween: 20
  },
  1400: {
    slidesPerView: 5,
    spaceBetween: 20
  }
})
const pagination = ref({
  clickable: true,
  // type: 'fraction',
  // type: 'progressbar',
})
const scrollbar = ref({
  hide: false,
  draggable: true,
})
// 存储swiper实例的数组
const swiperInstances = ref([])
const swiperInstances2 = ref([])
// 获取swiper实例的方法
const onSwiper = (swiper) => {
  swiperInstances.value = swiper
}

const currentIndex = ref(0);
const onSlideChange = (swiper) => {
  console.log('切换了');
  // console.log(swiper.activeIndex);
  const index = swiper.activeIndex;
  currentIndex.value = index;
};
// 切换到指定索引的幻灯片
const getIndex = (index) => {
  currentIndex.value = index;
  if (swiperInstances.value) {
    swiperInstances.value.slideTo(index);
  }
};

const onSwiper2 = (swiper) => {
  swiperInstances2.value = swiper
}
const slideChange2 = (swiper) => {
  // console.log(swiper.activeIndex);
  // console.log('切换了');
};

const prevSlide = () => {
  if (swiperInstances2.value) {
    swiperInstances2.value.slidePrev(); // 上一个幻灯片
  }
};
const nextSlide = () => {
  if (swiperInstances2.value) {
    swiperInstances2.value.slideNext(); // 下一个幻灯片
  }
};

// const newsBox = ref(null);
const article = useTemplateRef('article');
const newsBox = useTemplateRef('newsBox');
const { stop } = useIntersectionObserver(
  article,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      // 当组件进入可视区域时，开始轮播
      swiperInstances2.value.autoplay.start();
      // 当组件进入可视区域时，开始计数
      article.value.start();
      // 停止观察，防止重复触发
      stop();
    } else {
      swiperInstances2.value.autoplay.stop();
    }
  }, { threshold: 0.8 }
);

const progressCircle = ref(null);
const progressContent = ref(null);
const onAutoplayTimeLeft = (swiper, time, progress) => {
  // console.log(swiper);
  progressCircle.value.style.setProperty('--progress', 1 - progress);
  progressContent.value.textContent = `${Math.ceil(time / 1000)}s`;
};
</script>
<style scoped lang="scss">
.mySwiperContainer {
  width: 100%;

  .mySwiper {
    position: relative;

    .swiper-slide {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.01);

      img.fade-effect {
        transition: 3s linear;
        transform: scale(1.21);
      }
    }

    .swiper-slide-active,
    .swiper-slide-duplicate-active {
      img.fade-effect {
        transform: scale(1);
      }
    }

    .autoplay-progress {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 10;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: var(--swiper-theme-color);

      svg {
        --progress: 0;
        position: absolute;
        left: 0;
        top: 0px;
        z-index: 10;
        width: 100%;
        height: 100%;
        stroke-width: 4px;
        stroke: var(--swiper-theme-color);
        fill: none;
        stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
        stroke-dasharray: 125.6;
        transform: rotate(-90deg);
      }
    }
  }
}

.myImg {
  img {
    /* 关键属性：下方倒影，距离10px，带渐变遮罩 */
    -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  }
}

.active {
  background-color: #808080;
}
</style>
